<template>
  <view>
    <view class="w100 pt-8 pb-8 pl-24 pr-20 rowsb rowsm mb-10">
      <view class="rows rowsm">
        <view class="fs-28 fw-b col000 mr-16" v-if="classItem">{{classItem.name}}</view>
        <view class="fs-28 col000 mr-16" :class="{'fw-b':!classItem}" v-else @click="classItem = null,getList()">全部</view>
        
        <view class="rows rowsm" @click="$tools.goNext('/pagesCopy/index/classList')">
          <view class="fs-26 col666 mr-4">切换班级</view>
          <image src="/static/icon_1jt.png" class="w-20 h-20" mode=""></image>
        </view>
      </view>

      <!-- <view class="w-380 h-68 br-34 pl-34 pr-4 rowsb rowsm" style="border: 2rpx solid #4886FF;">
        <input type="text" placeholder="请输入搜索内容" placeholder-class="fs-26 col888">
        <view class="w-98 h-60 br-30 rowsc rowsm" style="background: linear-gradient(to bottom,#4897FF,#4878FF);">
          <image src="/static/icon_osbc-3.png" class="w-28 h-28" mode=""></image>
        </view>
      </view> -->
    </view>

    <view class="p-all-20 fs-28" style="padding-bottom: 0;">
        <view class="rowsb rowsm mb-20">
           <view class="title" style="width:20%;">学生姓名：</view>
           <uni-search-bar v-model="stName" style="flex: 1" radius="2" class="uni-mt-10" placeholder="请输入" clearButton="auto" cancelButton="none" @input="getList" />
        </view>
        <view class="rowsb rowsm mb-20">
           <view class="title" style="width:20%;">学生学号：</view>
           <uni-search-bar v-model="stNumber" style="flex: 1" radius="2" class="uni-mt-10" placeholder="请输入" clearButton="auto" cancelButton="none" @input="getList" />
        </view>
    </view>

    <view class="w100">
      <v-tabs :tabs="tab" :scroll="false" color="#333" active-color="#4878FF" active-font-size="28rpx" font-size="28rpx"
        :bold="false" v-model="active" @change="changeTab" line-color="#4878FF" :line-scale="0.18"></v-tabs>
    </view>

    <view class="w100 h-100 bgff pl-24 pr-24">
      <scroll-view scroll-x="true" style="white-space: nowrap;" class="w100 h100">
        <view class="rows rowsm h100">
          <view class="pl-20 pr-20 h-52 rowsc rowsm br-26 fs-26 mr-20" style="" v-for="(item,index) in tab2"
            :key="index"
            :style="active2 == tab2[index].value ? 'color: #fff;background: linear-gradient(to bottom,#4897FF,#4878FF);' : 'background-color: #F4F4F4;color: #666;'"
            @click="changeTab2(index)">{{item.name}}</view>
        </view>
      </scroll-view>
    </view>
    
    <view class="rowsc rowsm p-all-10 br-20 pl-20 pr-20" v-if="active2 == 0 && active == '0'" style="justify-content: center;">
        <checkbox-group @change="allSelectBtn">
          <checkbox :checked="allSelected" value="全选" class="checkbox">全选</checkbox>
        </checkbox-group>

        <button type="primary" :disabled="selectedIds.length == 0" @click="batchAudit">批量通过</button>
        <button :disabled="selectedIds.length == 0" @click="batchOverru">批量驳回</button>
      </view>

    <view class="w100 rowsc rowsm bgff" v-if="active2 == 0">
      <view class="w-710 h-64 br-8 pl-24 pr-24" style="background-color: #F4F4F4;">
        <picker mode="selector" :range="tab3" range-key="name" @change="changeTab3" class="w100">
          <view class="w100 rowsb rowsm h-64">
            <view class="fs-26 col666">{{tab3[active3].name}}</view>
            <image src="/static/icon_4jt.png" class="w-20 h-20" mode=""></image>
          </view>
        </picker>
      </view>
    </view>

    <view class="w100 p-all-20">
      
      <checkbox-group @change="selectBtn">
      <view class="w100 p-all-24 bgff br-16 mb-20" v-for="(item,index) in list" :key="index">
        <view class="w100 rowsb rowsm mb-18">
          <view class="flex rowsm">
            <view class="fs-28 col333 fw-b mr-20 title-warp" v-if="active2 == 0">
              <checkbox :value="String(item.id)" :checked="selectedIds.includes(item.id)"
                  :disabled="item.status != 1 ? true : false" class="checkbox">
                  <uni-tooltip :content="item.name" placement="top" v-if="item.name.length > 4">
                    {{ item.name.slice(0, 4) + '...' }}
                  </uni-tooltip>
                  <text v-else> {{ item.name }}</text>
                </checkbox>
            </view>
            <view class="fs-28 col333 fw-b mr-20 title-warp" v-else>
              <text> {{item.name ? item.name : tab2[tab2.findIndex(i => i.value == active2)].name}} </text>
            </view>
            <view @click.prevent="$tools.goNext('/pagesCopy/index/workDetail?id=' + item.id + '&index=' + active2+ '&ldType='+item.ldType)">
              <view class=" fs-24" style="color: #9AA2B5;" v-if="item.status == '2'||item.status == '3'">{{item.opTime || ''}}</view>
              <view class=" fs-24" style="color: #9AA2B5;" v-else>{{item.createTime || ''}}</view>
            </view>
          </view>
          <view @click.prevent="$tools.goNext('/pagesCopy/index/workDetail?id=' + item.id + '&index=' + active2+ '&ldType='+item.ldType)">
            <view class="pl-10 pr-10 h-48 br-24 rowsc rowsm fs-26" style="border: 2rpx solid #4878FF;color: #4878FF;" v-if="active2 == 0 && active == 1">
            {{item.dfCount || '0'}}积分
          </view>
          <view class="pl-10 pr-10 h-48 br-24 rowsc rowsm fs-26" style="border: 2rpx solid #4878FF;color: #4878FF;" v-else-if="(active2 == 1 ||active2 == 2 ||active2 == 3 )&& active == 1">
            {{item.markNumber || '0'}}
          </view>
          <view class="pl-10 pr-10 h-48 br-24 rowsc rowsm fs-26" style="border: 2rpx solid #FF9934;color: #FF9934;" v-else>
            <!-- {{item.status == 1 ? '未审批' : item.status == 2 ? `${item.dfCount}积分` : '已驳回'}} -->
            <text v-if="item.status == '1'">未审批</text>
            <text v-else-if="item.status == '2' && item.ldType =='0'">{{item.dfCount}}积分</text>
            <text v-else-if="item.status == '2' && (item.ldType =='1' ||item.ldType =='2'||item.ldType =='3'||item.ldType =='4')">{{item.markNumber}}</text>
            <text v-else-if="item.status == '3'">已驳回</text>
          </view>
          </view>
        </view>

        <view class="w100 rowsb rowsm" @click.prevent="$tools.goNext('/pagesCopy/index/workDetail?id=' + item.id + '&index=' + active2+ '&ldType='+item.ldType)">
          <view class="rows rowsm" style="flex: 1">
            <image src="/static/wd_gr.png" class="w-56 h-56 mr-12" mode=""></image>
            <view class="fs-24 col000" style="flex: 1">{{item.stName || ''}} ({{ item.stNumber }})</view>
          </view>
          <view class="fs-24 w-280 one_overflow trt" style="color: #9AA2B5;">分类: {{item.typeName}} </view>
        </view>
      </view>
      </checkbox-group>
    </view>
    
    <!-- <view class="w100 p-all-20" v-else>
      <view class="w100 p-all-24 bgff br-16 mb-20" v-for="(item,index) in 2" :key="index">
        <view class="fs-28 fw-b col333 mb-20">视频标题</view>
        <video src="http://ldjy.zxcvii.top/file/zb6.mp4" class="w100 h-300 mb-20"></video>
        <view class="w100 rowsa rowsm">
          <view class="w-184 h-64 br-32 rowsc rowsm colfff fw-b" style="background: linear-gradient(to bottom,#FFC234,#FF9A30);" @click="$refs.popup.open()">驳回</view>
          <view class="w-184 h-64 br-32 rowsc rowsm colfff fw-b" style="background: linear-gradient(to bottom,#4897FF,#4878FF);" @click="$tools.showtt('已通过')">通过</view>
        </view>
      </view>
    </view> -->
    
    
    <uni-popup ref="popup" type="center" :is-mask-click="false">
      <view class="w-670 h-542 br-20 bgff pt-32 pl-24 pr-24">
        <view class="w100 rowsc rowsm fs-32 col000 fw-b mb-34">提示</view>
        <view class="w100 h-240 br-12 p-all-24 mb-60" style="background-color: #F7F8FA;">
          <textarea value="" placeholder="请输入驳回理由" placeholder-class="fs-28" class="w100 h100" placeholder-style="color:#9AA2B5;" />
        </view>
        <view class="w100 rowsa rowsm">
          <view class="w-280 h-84 br-42 rowsc rowsm colfff fw-b" style="background: linear-gradient(to bottom,#FFC234,#FF9A30);" @click="$refs.popup.close()">取消</view>
          <view class="w-280 h-84 br-42 rowsc rowsm colfff fw-b" style="background: linear-gradient(to bottom,#4897FF,#4878FF);" @click="$tools.showtt('已驳回'),$refs.popup.close()">确定</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tab: ['未审批', '已通过', '已驳回'],
        active: 0,
        active2: -1,
        active3: 0,
        list: [],
        // tab2:['宿舍/教/实验劳动','校内公共区劳动','学校服务资源劳动','劳动报告心得体会','大学生创新创业','互联网+报告','演讲比赛/知识竞赛','劳动执行/文明宿舍','公益活动','科技帮扶报告','劳动周报告'],
        tab2: [{name:'全部',value:-1},{name:'基础劳动',value:0},{name:'社会公益劳动',value:3},{name:'劳动成果',value:2},{name:'劳动总结报告',value:1}],  //'全部', ,'短视频'
        tab3: [],
        classItem: null,
        total:0,
        limit: {
          pageNum: 1,
          pageSize: 10},
          stNumber: null,
          stName: null,
        hasMore: true,
        selectedIds: [],
        allSelected: null,
      };
    },
    onLoad() {
      uni.$on('choseClassItem', e => {
         this.limit.pageNum = 1
        this.classItem = e
        this.getList()
      })
      this.getType()
       this.getList()
    },
    onShow() {
     this.limit.pageNum = 1
      this.getList()
    },
    // 下拉到底部后加载新数据
    onReachBottom() {
      if (this.list.length < this.total) {
        this.limit.pageNum++;
        this.getList()
      }
    },
    methods: {
      changeTab2(index){
        this.limit.pageNum = 1
        // this.active2 = e.detail.value
        // this.getList()
        this.active2 = this.tab2[index].value;
        this.getList()
      },
      changeTab3(e){
        this.limit.pageNum = 1
        this.active3 = e.detail.value
        this.getList()
      },
      getType(){
         this.limit.pageNum = 1
        this.$tools.axiosFromToken('POST','proldconfig/list',{},'加载中').then(res => {
          if(res.code != 200) return this.$tools.showtt(res.msg)
          let {rows} = res
          this.tab3 = rows
          this.tab3.unshift({name:'全部',type:''})
          this.getList()
        })
      },
      changeTab(e) {
        this.limit.pageNum = 1
        this.active = e;
        this.selectedIds = [];
        this.allSelected = false;
        this.$forceUpdate();
        this.getList()
      },
      getList() {
      if(this.active2 === -1){
          let data = {
            status: +this.active + 1,
          }
            this.stNumber? data.stNumber = this.stNumber : '';
            this.stName? data.stName = this.stName : '';
          if (this.classItem) data.bjId = this.classItem.id
          this.$tools.axiosFromToken('POST', `prold/terList/all?pageNum=${this.limit.pageNum}&pageSize=${this.limit.pageSize}`, {
            ...data
          }, '加载中').then(res => {
            if (res.code != 200) return this.$tools.showtt(res.msg)
            this.total = res.total
            if (this.limit.pageNum == 1) {
              this.list = res.rows;
            } else {
              this.list = [...this.list, ...res.rows];
            }
          })
      }
       if(this.active2 == 0){
          let data = {
            status: +this.active + 1,
            type: this.tab3[this.active3].type
          }
            this.stNumber? data.stNumber = this.stNumber : '';
            this.stName? data.stName = this.stName : '';
          if (this.classItem) data.bjId = this.classItem.id
          this.$tools.axiosFromToken('POST', `prold/terList?pageNum=${this.limit.pageNum}&pageSize=${this.limit.pageSize}`, {
            ...data
          }, '加载中').then(res => {
            if (res.code != 200) return this.$tools.showtt(res.msg)
           this.total = res.total
            if (this.limit.pageNum == 1) {
              this.list = res.rows;
            } else {
              this.list = [...this.list, ...res.rows];
            }
          })
        }else{
          if(this.active2 == 1){
            let data = {
              status: +this.active + 1,
            }
            this.stNumber? data.stNumber = this.stNumber : '';
            this.stName? data.stName = this.stName : '';
            if (this.classItem) data.bjId = this.classItem.id
            this.$tools.axiosFromToken('POST',`proldzj/terList?pageNum=${this.limit.pageNum}&pageSize=${this.limit.pageSize}`,{...data},'加载中').then(res => {
              if(res.code != 200) return this.$tools.showtt(res.msg)
             this.total = res.total
            if (this.limit.pageNum == 1) {
              this.list = res.rows;
            } else {
              this.list = [...this.list, ...res.rows];
            }
            })
          }
          if(this.active2 == 2){
            let data = {
              status: +this.active + 1,
            }
            this.stNumber? data.stNumber = this.stNumber : '';
            this.stName? data.stName = this.stName : '';
            if (this.classItem) data.bjId = this.classItem.id
            this.$tools.axiosFromToken('POST',`proldcg/terList?pageNum=${this.limit.pageNum}&pageSize=${this.limit.pageSize}`,{...data},'加载中').then(res => {
              if(res.code != 200) return this.$tools.showtt(res.msg)
             this.total = res.total
              if (this.limit.pageNum == 1) {
                this.list = res.rows;
              } else {
                this.list = [...this.list, ...res.rows];
              }
            })
          }
          if(this.active2 == 3){
            let data = {
              status: +this.active + 1,
            }
            this.stNumber? data.stNumber = this.stNumber : '';
            this.stName? data.stName = this.stName : '';
            if (this.classItem) data.bjId = this.classItem.id
            this.$tools.axiosFromToken('POST',`proldgy/terList?pageNum=${this.limit.pageNum}&pageSize=${this.limit.pageSize}`,{...data},'加载中').then(res => {
              if(res.code != 200) return this.$tools.showtt(res.msg)
              this.total = res.total
              if (this.limit.pageNum == 1) {
                this.list = res.rows;
              } else {
                this.list = [...this.list, ...res.rows];
              }
            })
          }
        }
      },
      
      selectBtn(e) {
        this.selectedIds = [];
        if (e.detail.value.length > 20) {
          e.detail.value.slice(0, 20).forEach(v => {
            this.selectedIds.push(v)
          })
          this.$tools.showtt('最多只能批量操作20条数据');
        } else {
          e.detail.value.forEach(v => {
            this.selectedIds.push(v)
          })
        }
        this.allSelected = this.list.length == this.selectedIds.length && this.selectedIds.length <= 20 ? '全选' : false;
        this.$forceUpdate();
      },
      allSelectBtn(e) {
        if (e.detail.value[0] == '全选') {
          this.selectedIds = this.list
            .filter(v => v.status == 1)
            .map(v => v.id);

          if (this.selectedIds.length > 20) {
            this.selectedIds = this.selectedIds.slice(0, 20);
            this.$tools.showtt('最多只能批量操作20条数据');
          }
        } else {
          this.selectedIds = [];
        }
      },
      batchAudit() {
        uni.showModal({
          title: `确认批量审核`,
          content: `是否确认批量审核 ${this.selectedIds.length} 条任务数据项？`,
          success: (res) => {
            if (res.confirm) {
              let dataId = [];
              this.selectedIds.forEach(idItem => {
                this.list.forEach(item => {
                  if (idItem == item.id) {
                    dataId.push({ ...item });
                  }
                })
              });
              this.$tools.axiosFromToken('POST', 'prold/pass', JSON.stringify(dataId), '加载中').then(res => {
                this.$tools.showtt(res.msg)
                if (res.code != 200) return
                this.selectedIds = [];
                this.list = [];
                this.allSelected = false;
                this.getList();
              })
            } 
          }
        });
      },
      batchOverru() {
       uni.showModal({
         title: `确认批量驳回?`,
         content: `是否确认批量驳回 ${this.selectedIds.length} 条任务数据项？`,
         success: (res) => {
           if (res.confirm) {
            // 弹出输入框让用户填写驳回理由
            uni.showModal({
                 title: '驳回原因',
                 content: '',
                 editable: true,
                 placeholderText: '请填写驳回原因',
                 success: (promptRes) => {
                   if (promptRes.confirm) {
                     // 用户确认了输入框的内容
                     const reason = promptRes.content;  // 获取用户输入的驳回理由

                     if (reason.trim() === '') {
                       // 如果输入为空，提醒用户填写驳回理由
                       uni.showToast({
                         title: '驳回理由不能为空',
                         icon: 'none',
                       });
                       return;
                     }
                    let dataId = [];
                    this.selectedIds.forEach(idItem => {
                      this.list.forEach(item => {
                        if (idItem == item.id) {
                          dataId.push({ ...item, markName: reason });
                        }
                      })
                    });
                     this.$tools.axiosFromToken('POST', 'prold/reject', dataId, '加载中').then(res => {
                       this.$tools.showtt(res.msg)
                       if (res.code != 200) return
                       this.selectedIds = [];
                       this.list = [];
                       this.allSelected = false;
                       this.getList();
                     })
                   }
                 }
            })
           }
         }
       });
      },
    }
  }
</script>

<style lang="scss">
 // W文字超长省略
  .w-ellipsis {
    // width: 40%;
    // background: pink;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .title-warp{
  width: 120px;
  overflow: hidden;
  //文字溢出显示省略号
  text-overflow: ellipsis;
  white-space: nowrap;
  //文字居中
}
::v-deep .uni-input-input, .input-placeholder {
  font-size: 18px !important;
}
::v-deep .uni-searchbar__box {
  height: 34px !important;
}
::v-deep .uni-searchbar__cancel {
  display: none !important; 
}

button {
    height: 32px !important;
    line-height: 32px !important;
    font-size: 14px;
    padding: 0 8px !important;
}
</style>